<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<style type="text/css">
	[v-cloak] {
        display: none
    }
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.edit-text,
    .del-text,
    .enable-text,
    .disable-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #0085ac;
    }
	.del-text {
        color: #FF5959;
    }
	
</style>
</head>

<body>
	<!-- MAIN -->
	<div id="organization-lists" v-cloak class="main">
		<!-- MAIN CONTENT -->
		
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>财务管理</li>
				<li>计算提成</li>
			</ul>
			<div >
				<div style="margin: 10px;">
					
					<el-date-picker
						v-model="date2"
						type="month"
						format="yyyy-MM"
						value-format="yyyy-MM"
						placeholder="选择月">
					</el-date-picker>
					<el-select
						v-model="progress"
						multiple
						collapse-tags
						style="margin-left: 20px;"
						placeholder="请选择">
						<!-- <el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"> -->
						</el-option>
						<el-option value="1" label="新订单">  </el-option>
						<el-option value="2" label="已报单">  </el-option>
						<el-option value="3" label="已到货">  </el-option>
						<el-option value="4" label="已发货">  </el-option>
						<el-option value="5" label="退货">  </el-option>
						<el-option value="6" label="换货">  </el-option>
						<el-option value="0" label="已取消">  </el-option>
					</el-select>
					<el-button type="primary" style="margin-left: 5px;"  @click="getAccountList()">搜素
					</el-button> 
					<el-button type="primary" style="margin-left: 5px;"  @click="openCommon">设置公共业绩
					</el-button> 
					<el-radio-group v-model="type_money" @change="getAccountList">
						<el-radio-button  label="1">售价</el-radio-button>
						<el-radio-button  label="2">利润</el-radio-button>
					</el-radio-group>
					
				</div>
				
				
				<el-table ref="multipleTable" :data="accountInfo.rows" tooltip-effect="dark" style="width: 100%" border>
                    <el-table-column label="ID" prop="id" min-width="70">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex">
                                <div>ID</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户" min-width="148">
                        <template slot-scope="scope">
                            <div >
                                {{scope.row.true_name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="本月实际业绩" min-width="148">
                        <template slot-scope="scope">
                            <div >
                                {{scope.row.purchase_total}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="本月提成" min-width="148" align="center">
                        <template slot-scope="scope">
                            <div >
                                {{scope.row.money}}
                            </div>
                        </template>
                    </el-table-column>
					<el-table-column fixed="right" label="操作" min-width="170">
						<template slot-scope="scope">
							<span class="edit-text"  @click="openSingle(scope.row)">设置个人业绩</span>
						</template>
					</el-table-column>

                </el-table>
			</div>
			<div class="page-container display-flex">
				<el-pagination @size-change="accountHandleSizeChange" @current-change="accountHandleCurrentChange"
                    :current-page="accountCurrentPage"  page-size="10"
                    layout="total,  prev, pager, next, jumper" :total="accountInfo.total">
                </el-pagination>
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	<!-- 多选采购商弹框 -->
	<el-dialog
	title="设置"
	:visible.sync="buyersDialog"
	width="50%"
	>
	<div >
		<el-form :model="commission" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="月目标业绩" prop="num">
			  <el-input type="number" v-model="commission.num">
			  </el-input>
			</el-form-item>
			<el-form-item label="小于月目标" prop="num_lower">
				<el-input type="number" v-model="commission.num_lower">
					<span slot="suffix" style="padding-right: 6px; font-size: 27px;">
						{{ '%' }}
					</span>
				</el-input>
			</el-form-item>
			<el-form-item label="等于月目标" prop="num_d">
				<el-input type="number" v-model="commission.num_d">
					<span slot="suffix" style="padding-right: 6px; font-size: 27px;">
						{{ '%' }}
					</span>
				</el-input>
			</el-form-item>
			<el-form-item label="超出月目标" prop="num_big">
				<el-input type="number" v-model="commission.num_big">
					<span slot="suffix" style="padding-right: 6px; font-size: 27px;">
						{{ '%' }}
					</span>
				</el-input>
			</el-form-item>
		</el-form>
	</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="buyersDialog = false">取 消</el-button>
			<el-button type="primary" @click="commissionUpdate()" >确 定</el-button>
		</span>
	</el-dialog>
	</div>

	<!-- END MAIN -->
	<div class="clearfix"></div>
	<!-- FOOTER -->
	{%include file="public/footer" /%}
	<!-- END FOOTER -->


	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

	<script src="__STATIC__/assets/vendor/jquery.form.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>

	<!-- vue -->
	<script src="__ROOT__/assets/addons/shopro/libs/vue.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/Sortable.min.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/vuedraggable.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/moment.js"></script>
	<script type="text/javascript">
		var organizationLists = new Vue({
                el: "#organization-lists",
                data() {
                    return {
						date2:'',
                        name:'',
						buyersDialog:false,
						currentPage:1,//当前页
						totalPage:0,
						limit:10,
						editId:0,
						editDialog:false,
						accountInfo:{
							total:0
						},//队员信息
						accountCurrentPage:1,
						commission:{
							num:null,
							num_lower:null,
							num_d:null,
							num_big:null
						},
						rules: {
							num: [
								{ required: true, message: '不能为空', trigger: 'blur' },
							],
							num_lower: [
								{ required: true, message: '不能为空', trigger: 'blur' },
							],
							num_d: [
								{ required: true, message: '不能为空', trigger: 'blur' },
							],
							num_big: [
								{ required: true, message: '不能为空', trigger: 'blur' },
							],
							
						},
						type:1,//1为公共2为个人
						acct_id:'',//销售id
						options: [{
							value: '选项1',
							label: '黄金糕'
							}, {
							value: '选项2',
							label: '双皮奶'
							}, {
							value: '选项3',
							label: '蚵仔煎'
							}, {
							value: '选项4',
							label: '龙须面'
							}, {
							value: '选项5',
							label: '北京烤鸭'
						}],
						progress:['4','6'],
						type_money:1,//1为销售价类型，2为利润类型
                        
                    }
                },
                created() {
					this.getAccountList();
					
                },
                methods: {
					openCommon(){
						this.type = 1;
						this.buyersDialog = true;
						this.commissionSetting();
					},
					openSingle(row){
						this.type = 2;
						this.buyersDialog = true;
						this.acct_id = row.id;
						if(row.commission){
							this.commission = row.commission;
						}else{
							this.commission = {
								num:null,
								num_lower:null,
								num_d:null,
								num_big:null
							};
						}

					},
					commissionUpdate(){
						let t = this;
						if(this.type == 1){
							$.post("{%:url('Orders/commissionSettingUpdate')%}",{key:'commissionSetting', value:this.commission},function(rsp){
								if (rsp.code==1) {
									t.$message.success(rsp.msg);
									t.buyersDialog = false;
									t.getAccountList();
									t.commissionSetting();
								}else{
									t.$message.error(rsp.msg);
								}
							},'json')
						}else{
							$.post("{%:url('Orders/commissionUpdate')%}",{key:this.acct_id, value:this.commission,type_money:this.type_money},function(rsp){
								if (rsp.code==1) {
									t.$message.success(rsp.msg);
									t.buyersDialog = false;
									t.getAccountList();
								}else{
									t.$message.error(rsp.msg);
								}
							},'json')
						}
						
					},
					commissionSetting(){
						let t = this;
						$.post("{%:url('Orders/commissionSetting')%}",{key:'commissionSetting'},function(rsp){
							if (rsp.code==1) {
								t.commission = rsp.data;
								
							}else{
								t.$message.error(rsp.msg);
							}
						},'json')
					},
					accountHandleSizeChange(){},
					// 切换分页
					accountHandleCurrentChange(val){
						this.accountCurrentPage = val;
						this.getAccountList();
					},
					// 获取用户列表
					getAccountList(){
							let that = this;
							$.get("{%:url('Orders/commissionList')%}",{
								date2:this.date2,
								progress:this.progress,
								page:that.accountCurrentPage,
								page_size:10,
								status:1,//账号启用状态
								type_money:this.type_money
							},function(rsp){
								if(rsp.code == 1){
									that.accountInfo = rsp.data;
								}
							},'json')
						
					}
					
				},
				watch: {
                   
                }
    	})
		
	</script>
</body>

</html>